<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>案例-购物车</title>
		<script src="Vue.js"></script>
		<style type="text/css">
			*{
				margin:0;
				padding:0;
			}
			html,body{
				height:100%;
				width:100%;
			}
			#app{
				width:400px;
				min-height:300px;
				border:2px solid black;
				margin:50px auto;
				padding:20px;
				box-shadow:10px 20px 20px 10px gray;
			}
			h3{
				height:50px;
				width:100%;
				line-height:50px;
				background-color:black;
				color:white;
				text-align:center;
			}
			ul{
				list-style:none;
				width:100%;
				min-height:150px;
				border-top:1px solid black;
				border-bottom:1px solid black;
				margin:10px 0;
				padding:10px 0;
			}
			ul li{
				width:100%;
				height:50px;
			}
			ul li img{
				display:block;
				width:50px;
				height:40px;
				float:left;
				margin-right:20px;
				cursor:pointer;
			}
			ul li img:hover{
				border:1px solid red;
			}
			em{
				font-size:14px;
			}
			button{
				width:40px;
				height:30px;
				border:none;
				background-color:black;
				color:white;
				cursor:pointer;
				font-size:20px;
				margin-left:55px;
			}
			button:hover{
				background-color:red;
			}
			input{
				width:50px;
				height:30px;
				line-height:30px;
				text-align:center;
			}
			span{
				color:black;
				font-size:26px;
				display:block;
				float:right;
				cursor:pointer;
			}
			span:hover{
				color:red;
			}
			.current span{
				float:left;
				display:block;
				margin-left:40%;
				min-width:100px;
				height:30px;
				line-height:30px;
				text-align:center;
			}
			.current button{
				margin-left:5%;
				width:60px;
				font-size:14px;
			
			}
			p{
				text-align:center;
				color:red;
				font-size:24px;
				font-family: 幼圆;
				margin-top:50px;
			}
		</style>
	</head>
	<body>
		<div id="app">
			<header-box></header-box>
			
			<main-box :datalist="list"></main-box>
			
			<footer-box class="current" :datalist="list"></footer-box>
		
		</div>
		
		<script>
			let vm = new Vue({
				el:"#app",
				data:{
					list:[
						{
							id:1,
							src:"img/icon-1.png",
							num:0,
							price:236
						},
						{
							id:2,
							src:"img/icon-2.png",
							num:0,
							price:875
						},
						{
							id:3,
							src:"img/icon-3.png",
							num:0,
							price:658
						},
						{
							id:4,
							src:"img/icon-4.png",
							num:0,
							price:987
						},
						{
							id:5,
							src:"img/icon-5.png",
							num:0,
							price:345
						}
					]
				},
				components:{
					"header-box":{
						template:`<h3>{{mytext}}</h3>`,
						data:function(){
							return {
								mytext:"我的商品"
							}
						}
					},
					"main-box":{
						template:`
						<div>
							<ul>
								<li :key="data.id" v-for="(data,index) in datalist">
									<img :src="data.src">
									<em>单价{{data.price}}元</em>
									<button @click="handle1(index)" :title="title1" ref="left">-</button>
									<input type="text" v-model="data.num">
									<button @click="handle2(index)" :style="right" :title="title2">+</button>
									<span @click="handle3(index)" :title="title3">&times;</span>
								</li>
								<p v-if="datalist.length ==0">您的购物车里面没有商品！</p>
							</ul>
						</div>
						`,
				        props:["datalist"],
						data:function(){
							return {
								right:{
									margin:0
								},
								title1:"减少商品件数",
								title2:"增加商品件数",
								title3:"删除"
							}
						},
						methods:{
							handle1:function(index){
								if(this.datalist[index].num > 0){
									this.datalist[index].num--;
									this.$refs.left[index].style.backgroundColor="black";
								}else{
									this.datalist[index].num=0;
									this.$refs.left[index].style.backgroundColor="gray";
								}
								
							},
							handle2:function(index){
								this.datalist[index].num++;
								this.$refs.left[index].style.background="black";
							},
							handle3:function(index){
								if(confirm("您确定将此条商品信息从您的购物车清除？")){
									this.datalist.splice(index,1);
								}
							}
						}
					},
					"footer-box":{
						template:`
						<div>
							<span :style="obj">总价: {{total}} 元</span>
							<button @click="handle4">结算</button>
						</div>`,
						data:function(){
							return {
								obj:{
									color:"black",
									fontSize:"16px"
								}
							}
						},
						props:["datalist"],
						computed:{
							total:function(){
								var sum = 0;
								for(var i=0; i<this.datalist.length; i++){
									sum += this.datalist[i].price * this.datalist[i].num;
								}
								return sum;
							}
						} ,
						methods:{
							handle4:function(){
								confirm("您确定提交订单！");
							}
						}
						
					}
				}
			})
		</script>
	</body>
</html>
